<template>
    <el-container direction="vertical">

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="id" label="ID" sortable width="80">
            </el-table-column>
            <el-table-column prop="title" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="listorder" label="排序" width="80">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.listorder" @blur="changeListorder(scope.row.id, scope.row.listorder)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="actions" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button size="mini" type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-container>
</template>

<script>

import { dataInteraction } from '../../../utils/auth'
export default {
    name: 'MenuIndex',
    data() {
        return {
            tableData: [
                
            ]
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            dataInteraction('/tr/api/menu/getMenu', {}).then(res => {
                this.tableData = res.data
                console.log(res)
            })
        },
        changeListorder(id, listorder){
            var params = {
                id: id,
                listorder: listorder
            }
            console.log(id, listorder, params)
            dataInteraction('/tr/api/menu/updateMenu', params).then(res => {
                this.tableData = res.data
                console.log(res)
            })
        }
    },
}
</script>

<style>
.el-table{
    overflow: scroll;
}
</style>